<!--
 * @Author: wanglidong
 * @Date: 2021-04-08 09:22:42
 * @LastEditTime: 2023-02-14 15:44:18
 * @LastEditors: wanglidong
 * @Description: 智慧工地
 * @nbsg
-->
<template>
  <div>
    <div class="model-title-css">
      <div class="title">智慧工地</div>
    </div>
    <div class="background_wrap">
      <div class="operate_wrap flexDiv">
        <div class="flex-left">
          <el-button type="primary" size="small" class="add buildButtonStyle" @click="showDetailDialog('build')" v-permission="permission.add">
            <i class="iconfont icon-icon_add"></i>&nbsp;新增
          </el-button>
        </div>
        <div class="flex-right">

          <el-date-picker style="width: 350px;" v-model="searchDates" type="daterange" format="yyyy-MM-dd" unlink-panels value-format="yyyy-MM-dd" range-separator="至" start-placeholder="选择开始日期" end-placeholder="选择结束日期" clearable @change="onChangeTime">
          </el-date-picker>

          <!-- <el-date-picker style="width:160px;margin-right:15px;" size="small" v-model="search.startTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"></el-date-picker>
          <span style="padding-right: 15px">至</span>
          <el-date-picker style="width:160px;margin-right:15px;" size="small" v-model="search.endTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
          </el-date-picker> -->

          <el-button class="search" size="small" @click="getList(true)"><i class="iconfont icon-sousuo"></i> 搜索</el-button>
          <!-- <el-button class="search reset" size="small" type="reset" @click="reset"><i class="iconfont reset-size1"></i>重置</el-button> -->

        </div>
      </div>
      <div class="list_wrap WholeScroll">
        <el-table class="auto-flex-table table-three-blue" :border="true" :row-class-name="tableRowStyleName" :cell-class-name="tableCellStyleName" :header-cell-class-name="tableHeaderCellStyleName" :stripe="true" ref="multipleTable" :data="list" tooltip-effect="dark" style="width: 100%; font-family: PingFangSC-Regular; font-size: 14px;" @cell-click="cellClick">
          <el-table-column label="序号" type="index" align="center" width="60">
            <template slot-scope="scope">
              {{ scope.$index + search.pageIndex * search.pageSize + 1 }}
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="projectName" label="所属项目" min-width="320"></el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="名称" min-width="140"></el-table-column>

          <el-table-column show-overflow-tooltip prop="creater" label="录入人" min-width="160"></el-table-column>

          <el-table-column show-overflow-tooltip prop="createTime" label="录入时间" width="170"></el-table-column>

          <el-table-column show-overflow-tooltip label="操作" width="250">
            <template slot-scope="scope">
              <el-button size="mini" class="menu_icon iconfont icon-icon_look action_color1" v-permission="permission.show" @click="handleClickDeal({ type: 'show', name: scope.row.route, detailId: scope.row.route })">&nbsp;查看</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-xiugai-copy action_color1" v-permission="permission.edit" @click="handleClickDeal({ type: 'update', name: '修改', detailId: scope.row.id })">&nbsp;修改</el-button>
              <el-button size="mini" class="menu_icon iconfont icon-shanchu action_color2" v-permission="permission.del" @click="handleClickDeal({ type: 'delete', name: '删除', detailId: scope.row.id })">&nbsp;删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination style="text-align: right; margin-top: 20px" layout="prev, pager, next" :page-size="search.pageSize" :total="search.pageSum" :current-page="search.pageIndex + 1" @current-change="paginationChange"></el-pagination>
      </div>
    </div>
    <Detail :postDetail="postDetailData" @reloadList="getList(true)"></Detail>
  </div>
</template>

<script>
import selectProjectAndSection from '@/mixins/selectProjectAndSection';
import projectSectionInfo from "@/api/buss/common";
import {
  tableRowStyleGol,
  tableCellStyleGol,
  tableHeaderCellStyleGol,
  doCreateObject
} from '@/utils/publicFun';
import msgUtil from "@/utils/msgUtil";
export default {
  name: 'smartWorkSite',
  mixins: [selectProjectAndSection],
  components: {
    Detail: require('./smartWorkSite-detail')
      .default
  },
  data() {
    let permissionBaseCode = "1009159";
    return {
      tableRowStyleName: tableRowStyleGol,
      tableCellStyleName: tableCellStyleGol,
      tableHeaderCellStyleName: tableHeaderCellStyleGol,
      permission: {
        add: [`${permissionBaseCode}:add`],
        show: ['100', `${permissionBaseCode}:getOne`],
        edit: ['100', `${permissionBaseCode}:edit`],
        del: ['100', `${permissionBaseCode}:del`],
        listPage: ['100', `${permissionBaseCode}:listPage`],
      },
      searchDates: [],
      search: {
        pageIndex: 0,
        pageSize: 15,
        pageSum: 0,
        sortField: 'updateTime',
        buildCompanyId: '',
        projectId: '',
        itemName: '',
        endTime: '',
        startTime: '',
        company: { children: [] },
        project: { children: [] },

      }, // 搜索参数
      companyTree: [],
      projectTree: [],
      contsectTree: [],
      measurePhase: [],
      list: [
      ],
      postDetailData: {
        show: false,
        type: 'build'
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    onChangeTime() {
      if (this.searchDates) {
        this.search.startTime = this.searchDates[0] + ' 00:00:00'
        this.search.endTime = this.searchDates[1] + ' 23:59:59'
      } else {
        this.search.startTime = ''
        this.search.endTime = ''
      }
      this.getList(true)
    },
    fixQueryB() {
      if (this.search.project.children) {
        // this.search.section = this.search.project.children[0];
      } else {
        this.search.section = {};
      }
      this.getList();
      // this.fixQueryC()
    },

    //切换分页器
    paginationChange(index) {
      this.search.pageIndex = index - 1;
      this.getList();
    },
    //判断浏览器高度
    checkWindowHeight() {
      let height = $(window).height();
      if (height > 920) {
        this.search.pageSize = 15;
      }
      if (height < 920) {
        this.search.pageSize = 10;
      }
    },
    reset() {
      this.search.startTime = ""
      this.search.endTime = ""
      this.getList(true);
    },
    // 获取列表 api
    getList(reload) {
      if (reload) {
        this.search.pageIndex = 0;
      }
      // this.checkWindowHeight()
      this.list = [];
      let postData = {
        pageNo: this.search.pageIndex,
        pageSize: this.search.pageSize,
        //projectId: this.search.projectId,
        //createTime: this.searchDates,
        endTime: this.search.endTime,
        startTime: this.search.startTime,
      };
      this.$httpPost(
        '/buss/smartWorkSite/getList',
        postData
      ).then((res) => {
        if (res.code === 200) {
          this.list = res.data.content;
          console.log(res, 'res');
          this.search.pageSum = parseInt(res.data.totalElements);
        } else {
          this.$messageError(res.data.message);
        }
      })
        .catch((res) => {
          console.log('请求出现错误', res);
          this.$messageError(this.$route.name + '请求失败');
        });
    },
    // 事件处理的api请求
    sealDealHttp(url, query, param, callback) {
      this.$httpPost(url + query, param)
        .then((res) => {
          if (res.status === 1) {
            if (callback) callback(res);
            // 重新获取数据
            setTimeout(() => {
              this.getList(true);
            }, 1000);
          } else {
            this.$messageError(res.message);
          }
        })
        .catch((res) => {
          console.log('请求出现错误', res);
          console.log(res);
        });
    },
    // 显示详情弹窗 不同状态
    showDetailDialog(flag, params) {
      console.log(flag, params);
      switch (flag) {
        case 'build':
          this.postDetailData = {
            show: true,
            type: 'build',
            params: params
          };
          break;
        case 'update':
          this.postDetailData = {
            show: true,
            type: 'edit',
            params: params
          };
          break;
        //查看
        case 'show':
          this.postDetailData = {
            show: true,
            type: 'check',
            params: params
          };
          break;
        //文件上传
        case 'upload':
          this.postDetailData = {
            show: true,
            type: 'upload',
            params: params
          };
          break;
        case 'history':
          this.postDetailData = {
            show: true,
            type: 'history',
            params: params
          };
          break;
        case 'download':
          this.postDetailData = {
            show: true,
            type: 'download',
            params: params
          };
          break;
      }
    },
    // 列表的操作流程
    handleClickDeal(res) {
      let type = res.type;
      let detailId = res.detailId;
      let url = res.url;
      let name = res.name;
      let actions = res.actions;
      this.boundContractId = detailId;
      // console.log(res)
      switch (type) {
        // 查看
        case 'show':
          //跳转
          let route = res.detailId
          if (route) {
            if (route.indexOf('http') !== -1 || route.indexOf('www') !== -1) {
              window.open(route, '_blank')
            } else {
              const rData = this.$router.resolve({ path: route, query: { id: detailId } })
              window.open(rData.href, '_blank')
            }
          } else { msgUtil.error2('无路由数据') }
          break
        // 修改
        case 'update':
          // 显示详情弹窗
          this.showDetailDialog(type, {
            detailId: detailId,
            actions: actions
          });
          break;
        // 删除
        case 'delete':
          if (detailId === '') {
            this.$messageError('请先选择要删除的记录！');
            return;
          }
          this.$confirm('确定是否删除？', '提示', {
            confirmButtonClass: 'iconfont icon-icon_ok',
            cancelButtonClass: 'iconfont icon-icon_cancel',
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'info'
          }).then(() => {
            this.$httpPost(
              '/buss/smartWorkSite/del',
              { ids: detailId.split(',') },
            ).then((res) => {
              if (res.code === 200) {
                msgUtil.success2("删除成功")
                this.getList(true)
              } else {
                this.$messageError(res.msg);
              }
            }).catch((res) => {
              console.log('请求出现错误', res);
              this.$messageError(this.$route.name + '请求失败');
            });
          })
            .catch(() => {
            });
          console.log('请求出现错误');
          break;
      }
    },
    // 点击单元格
    cellClick(row, column, cell, event) {
      // console.log(row, column, cell, event)
      if (column.property === 'name') {
        let url = row.route
        if (url) {
          if (url.indexOf('http') !== -1 || url.indexOf('www') !== -1) {
            window.open(url, '_blank')
          } else {
            const rData = this.$router.resolve({ path: url })
            window.open(rData.href, '_blank')
          }
        }
        // this.handleClickDeal({
        //   type: 'show',
        //   detailId: row.id,
        //   actions: row.actions
        // });
      }
    }
  }
};
</script>

<style scoped lang="scss">
.top {
  width: 100%;
  height: 40px;

  .title {
    float: left;
    font-family: PingFangSC-Regular;
    font-size: 18px;
    font-weight: 600;
  }
}

.operate_wrap {
  width: 100%;

  .select {
    width: 200px;
  }

  .input {
    width: 200px;
    margin: 0 15px;
  }

  .search {
    width: 88px;
    color: #fff;
  }
}

.list_wrap {
  margin-top: 20px;
}

.navigation {
  width: 100%;
  height: 40px;
  box-sizing: border-box;
  border-bottom: 1px solid #313e50;
  margin-top: 5px;

  .el-button {
    height: 40px;
    background: #374256;
    border: 1px solid #374256;
    font-family: PingFangSC-Regular;
    border-radius: 5px 5px 0 0;
    min-width: 95px;
    font-size: 14px;
    color: #8190a7;

    &:hover {
      background-color: #f2f2f2;
    }

    &[selected] {
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }
}
</style>
